<!-- Popup.vue -->  
<template>  
    <div>
        <transition name="fadeIn">  
            <div class="overlay" v-if="visible" @click="hide"></div> 
        </transition>  
        <transition name="slideUp">
            <div class="popup-container" v-if="visible">
                <div class="popup_title">
                    {{ title }}
                    <!-- <i-ion:close class="close"/> -->
                </div>
                <slot></slot>
            </div>
        </transition>
    </div>
</template>  
    
<script>  
export default {
    props: {
        title: {
            type: String,
            default: '选择类型'
        }
    },
    data(){
        return {
            visible: false
        }
    },
    methods: {
        show(){
            this.visible = true
        },
        hide(){
            this.visible = false;
        }
    }
}
</script>  
    
<style scoped lang="scss">  
.popup-container {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    right: 0;  
    width: 400px;
    z-index: 1000;
    border-radius: 10px 10px;
    background-color: #fff;
    transform: translateX(-50%) translateY(-50%);
}  
    
.overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background-color: rgba(0, 0, 0, 0.5);  
    z-index: 999;
}  
.popup_title{
    border-bottom: 1px solid #e6e6e6;
    padding: 16px 64px;
    text-align: center;
    position: relative;
    font-size: 16px;
    line-height: 1em;
    color: #000000cf;
    .close{
        position: absolute;
        right: 15px;
        top: 14px;
        font-size: 18px;
    }
}
.fadeIn-enter-active, .fadeIn-leave-active {  
  transition: opacity 0.25s ease;  
}  
.fadeIn-enter, .fadeIn-leave-to {  
  opacity: 0;  
}  
.fadeIn-enter-to, .fadeIn-leave {  
  opacity: 1;  
}
.slideUp-enter-active, .slideUp-leave-active {  
  transition: all 0.25s ease;  
}  
.slideUp-enter, .slideUp-leave-to {  
  opacity: 0;  
  transform:translateX(-50%) translateY(20px);
}  
.slideUp-enter-to, .slideUp-leave {  
  opacity: 1;  
}
</style>